import { useState } from 'react'
import { Button, Input, MessagePlugin, Radio, RadioGroup } from 'tdesign-react'
import { ApiRequest, apis } from '@/service'
import '../index.less'

const {
  practiceService: {
    insertUser
  }
} = apis

const AddUser = () => {

  const [user, setUser] = useState<UserType>({
    userName: '',
    userId: '',
    userAge: 0,
    userRank: 'customer',
    userSex: 0,
  })

  const onInputChange = (value: string, field: string) => {
    const _user = {
      ...user,
      [field]: value
    }
    // console.log('params', params)
    setUser(_user)
  }

  const onRadioChange = (event: any) => {
    setUser({
      ...user,
      userRank: event
    })
  }


  const onAddUser = (params: any) => {
    params = {
      ...user
    }
    ApiRequest({ api: insertUser, params }).then((res: any) => {
      const { code = -1, data = [], note = '' } = res
      if (code > 0) {
        MessagePlugin.success({
          content: note,
          placement: 'top-right',
          duration: 2000
        })
      } else {
        MessagePlugin.error({
          content: note,
          placement: 'top-right',
          duration: 2000
        })
      }
    })
  }

  return <div className='add-user frame'>
    <div className='input-block'>
      <Input
        className='input-user-name'
        label='用户名字'
        placeholder='请输入用户名字'
        onChange={(value) => { onInputChange(value, 'userName') }}
      />
      <Input
        className='input-user-id'
        label='用户ID'
        placeholder='请输入用户ID'
        onChange={(value) => { onInputChange(value, 'userId') }}
      />
      <Input
        className='input-user-age'
        label='用户年龄'
        placeholder='请输入用户年龄'
        onChange={(value) => { onInputChange(value, 'userAge') }}
      />
      <Input
        className='input-user-sex'
        label='用户性别'
        placeholder='请输入用户性别'
        onChange={(value) => { onInputChange(value, 'userSex') }}
      />
    </div>
    <div className='select-user-rank-block'>请选择用户类型
      <RadioGroup className='select-user-rank' onChange={onRadioChange} >
        <Radio value={'customer'} key={'customer'}>{'customer'}</Radio>
        <Radio value={'leader'} key={'leader'}>{'leader'}</Radio>
      </RadioGroup>
      </div>
    <Button
      className='add-user-btn'
      onClick={onAddUser}
    >
      添加用户
    </Button>
  </div>
}

export default AddUser